<template>
    <div class="indexBj" >
         <div class="left">
            <div class="leftTop">
                <h4>接入资源</h4>
                <div class="top">
                    <div class="content" ref="top01" v-loading="loadingVisible1">
                      <el-table
                      :data="tableList"
                      height="100%"
                      :header-cell-style="{ background: '#f2f5f8',fontSize:'14px',color:'#515a6e'}"
                      style="width: 100%">
                      <el-table-column
                        prop="name"
                      align="center"
                        label="模型名称"
                        >
                      </el-table-column>
                      <!-- <el-table-column
                        prop="value"
                      align="center"
                        label="数 量">
                      </el-table-column> -->
                    </el-table>
                    </div>
                    <div class="content" v-show="false" ref="top02" v-loading="loadingVisible2"></div>
                    <div class="content" ref="top03" style="padding-top:12px;" v-loading="loadingVisible3">
                        <p style="text-align: center;">数据统计</p>
                        <div style="height:180px;overflow-y: scroll;">
                            <div v-for="(item,index) in customColors" :key="index" style="padding:10px 0;">
                                <p style="display: flex;flex-direction: row;justify-content: space-between;"> <span>{{ item.taskName }}</span> <span>{{ item.healthValue }}</span></p>
                                <el-progress :show-text="false"  :percentage="item.healthValue" :color="colors[0]"></el-progress>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom" >
                <div style="overflow: hidden;">
                    <h4>资源统计</h4>
                    <div class="content bottom-t" style="display: flex;">
                        <div style="width: 70%;" v-loading="loadingVisible4">
                            <ul class="lul">
                                <li v-for="(item,index) in optionsList" :key="index">
                                    <div class="icon">
                                        <svg-icon :icon-class="iconList[index]" style="font-size: 20px;"></svg-icon>
                                    </div>
                                    <div class="info">
                                        <p><label style="font-weight: bold;color: #ff6a00;">{{ item.title }}</label><span style="background: none;"> </span> </p>
                                        <p  v-for="(item2,index2) in item.values" :key="index2"><label>{{ item2.name }}</label>
                                            <span>{{ item2.value }}.00</span>
                                        </p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div style="width:30%;" ref="top04" v-loading="loadingVisible5"></div>
                    </div>
                </div>
                <div>
                    <h4>模型应用管理</h4>
                    <div class="content bottom-b" style="padding: 0 20px;" >
                        <ykhttb :height="250" :btn-is-show="btnIsShow" :table-col="tabUserList" :table-data="tableUserData"/>
                    </div>
                </div>
            </div>
         </div>
         <div  class="right">
            <div class="right-top">
                <h4>服务运维</h4>
                <ul class="rul"  v-loading="loadingVisible6">
                    <li v-for="(item,index) in roptions1" :key="index">
                        <div :style="{border:`2px solid #2778be`}"><svg-icon :icon-class="iconList2[index]" :style="{fontSize: '20px',color:`#2778be`}"></svg-icon></div>
                        <p class="name" :style="{color:`#929a9e`}">{{ item.name }}</p>
                        <p class="count" :style="{color:`${colors[index]}`}">{{ item.value }}</p>
                    </li>
                </ul>
            </div>
            <div class="right-center">
                <h4>主题目录</h4>
                <div style="padding: 0 20px;">
                    <ykhttb :height="160" :btn-is-show="btnIsShow" :table-col="tabUserList2" :table-data="tableData"/>
                </div>
            </div>
            <div class="right-bottom">
                <h4>Topic数据监控</h4>
                <ul class="lastul"  v-loading="loadingVisible7" v-if="errorInfoList.length!=0">
                    <li v-for="(item,index) in errorInfoList" :key="index">
                        <span>{{ item?item.topic:'' }}</span>
                        <!-- <span>异常</span> -->
                        <span>{{ item?item.lag:'' }}</span>
                    </li>
                </ul>
                <div v-else style="text-align: center;line-height: 80px;letter-spacing: 2px;color: #a1a1a1;"> 暂无数据 </div>
            </div>
         </div>
    </div>
</template>

<script>
import {dataServequeryHomeCount,indexgetServiceInfo,requestLoggetRequestStatusCount,MQMonitorkafka,
    indexgetUseageInfo,dataModelapplygetList,dataSubjectdirectorygetList,indexgetDataSourceRate
} from '@/api/zt/index'
import * as echarts from 'echarts';


export default{
    data(){
        return{
           tableList:[],
            btnIsShow:{operate:false},
            loadingText:"加载中……",
            loadingVisible1:false,
            loadingVisible2:false,
            loadingVisible3:false,
            loadingVisible4:false,
            loadingVisible5:false,
            loadingVisible6:false,
            loadingVisible7:false,
            formatter:'{name|{b}}',
            colors:['#9eb1ff','#fe9d4e','#63dead','#85776e','#bfca90','#9a69bc','#647998'],
            tableUserData:[],
            tabUserList2: [
                {
                    key: 'subjectDirectoryName',
                    title: '目录名称'
                },
                {
                    key: 'subjectDirectoryTypeName',
                    title: '目录类型'
                },
                {
                    key: 'dataProvider',
                    title: '数据提供方'
                },
                {
                    key: 'phoneNumber',
                    title: '联系方式'
                }
                ],
            tabUserList: [
                {
                key: 'dataModelName',
                title: '模型名称'
                },
                {
                key: 'applyTypeName',
                title: '应用维度'
                },
                {
                key: 'applyName',
                title: '应用内容'
                },
                {
                key: 'createTime',
                title: '创建时间'
                },
                {
                key: 'updateTime',
                title: '更新时间'
                }
            ],
            iconList:['sqlMonitor','api','jq','tm'],
            iconList2:["international","ipvisits","bs","link","list"],
            errorInfoList:[],
            roptions1:[],
            topInfo:{'0':{},'1':{},'2':{}},
            count:0,
            tableData: [],
            optionsList:[],
            customColors: []
        }
    },
    methods:{
        drophistogram(v){
            var chartDom = this.$refs.top04;
            var myChart = echarts.init(chartDom);
            var option;
            var datas = [v.values];
            let that = this

            option = {
                title: {
                    text:v.title,
                    left: 'center',
                    textStyle: {
                        color: '#555',
                        fontWeight: 'normal',
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                series: datas.map(function (data, idx) {
                    var top = idx * 33.3+30;
                    return {
                        minAngle:30,//文字重复
                        avoidLabelOverlap:true,//文字重复
                        type: 'pie',
                        radius: [40, 54],
                        top: top + '%',
                        height: '33.33%',
                        left: 'center',
                        width: 400,
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        label: {
                            alignTo: 'edge',
                        formatter: that.formatter,
                        normal: {
                            show: true,
                            fontSize: 10,
                            formatter: that.formatter,
                            rich: {
                                a: {
                                    left: 20,
                                    padding: [-25, -70, 0, -60],  //位置按需要调整
                                }
                            }
                        }
                    },
                    itemStyle:{
                        color: function(params) {
                            return that.colors[params.dataIndex];
                        }
                },
                    labelLine: {
                        length: 15,
                        length2: 0,
                        maxSurfaceAngle: 80
                    },
                    labelLayout: function (params) {
                        const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                        const points = params.labelLinePoints;
                        points[2][0] = isLeft
                        ? params.labelRect.x
                        : params.labelRect.x + params.labelRect.width;
                        return {
                        labelLinePoints: points
                        };
                    },
                    data: data
                    };
                })
            };
            option && myChart.setOption(option);
        },
        drop01(v){
            var chartDom = this.$refs.top01;
            var myChart = echarts.init(chartDom);
            var option;
            let that = this
            var datas = [
              v.values
            ];
            option = {
                title: {
                    text: v.title,
                    left: 'center',
                    textStyle: {
                        color: '#555',
                        fontWeight: 'normal',
                        fontSize: 14
                    }
                },

                tooltip: {
                    trigger: 'item'
                },
                series: datas.map(function (data, idx) {
                    var top = idx * 33.3+40;
                    return {
                    type: 'pie',
                    radius: [26, 52],
                    top: top + '%',
                    height: '33.33%',
                    left: 'center',
                    width: 400,
                    minAngle:30,//文字重复
                    avoidLabelOverlap:true,//文字重复
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    itemStyle:{
                        color: function(params) {
                         return that.colors[params.dataIndex];
                        }
                    },
                    label: {
                        alignTo: 'edge',
                        formatter: that.formatter,
                        normal: {
                            show: true,
                            fontSize: 10,
                            formatter: that.formatter,
                            rich: {
                                a: {
                                    left: 20,
                                    padding: [-25, -70, 0, -60],  //位置按需要调整
                                }
                            }
                        }
                    },
                    labelLine: {
                        length: 15,
                        length2: 0,
                        maxSurfaceAngle: 80
                    },
                    labelLayout: function (params) {
                        const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                        const points = params.labelLinePoints;
                        // Update the end point.
                        points[2][0] = isLeft
                        ? params.labelRect.x
                        : params.labelRect.x + params.labelRect.width;
                        return {
                        labelLinePoints: points
                        };
                    },
                    data: data
                    };
                })
            };
            option && myChart.setOption(option);
        },
        droppie(v){
            let srelist = []
            v.values.forEach((item,index)=>{
                srelist.push({
                    value:item['value'],
                    name:item['name']
                })
            })
            var chartDom = this.$refs.top02;
            var myChart = echarts.init(chartDom);

            let that = this
            var option;

            option = {
            title: {
                text:v.title,
                subtext: ' ',
                left: 'center',
                textStyle: {
                    color: '#555',
                    fontWeight: 'normal',
                    fontSize: 14
                }
            },
            tooltip: {
                trigger: 'item'
            },
            label: {
                alignTo: 'edge',
                formatter: that.formatter,
                minMargin: 5,
                edgeDistance: 10,
                lineHeight: 15,
                rich: {
                time: {
                    fontSize: 10,
                    color: '#999'
                }
                }
            },
            series: [
                {
                name: '',
                type: 'pie',
                radius: '46%',
                data: srelist,
                minAngle:30,//文字重复
                avoidLabelOverlap:true,//文字重复
                itemStyle:{
                    color: function(params) {
                        return that.colors[params.dataIndex];
                    }
                },
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
            };

            option && myChart.setOption(option);
        },
        queryTopInfo(){
            dataServequeryHomeCount({}).then(res=>{
                this.topInfo = {}
                res.data.forEach((item,index)=>{
                    let k = Object.keys(item)
                    this.topInfo[index]={
                        key:k[0],
                        val:item[k[0]]
                    }
                })
            })
        },
        indexgetUseageInfoFun(){
            indexgetUseageInfo({}).then(res=>{
                this.optionsList =  res.data
            })
        },
        dataSubjectdirectorygetListFun(){
             //主题目录
            dataSubjectdirectorygetList({
                'pageIndex':1,
                'pageSize':4,
                'subjectDirectoryName':''
            }).then(res => {
                this.tableData = res.data.records
            })
        },
        dataModelapplygetListFun(){
             //模型应用情况
            dataModelapplygetList({
                'pageIndex': 1,
                'dataModelName': '',
                'pageSize':10,
                'applyTypeNum':''
            }).then(res => {
                this.tableUserData = res.data.records
            })
        },
        // ---------
        MQMonitorkafkaFun(){
            this.loadingVisible7 = true
            MQMonitorkafka({}).then(res => {
                this.loadingVisible7 = false
                this.errorInfoList  = res.data.records
            })
        },
        indexgetDataSourceRateFun(){
            this.loadingVisible4 = true
            indexgetDataSourceRate({type:'dataSource'}).then(res=>{
                this.drophistogram(res.data)
                this.loadingVisible4 = false
            })
        },
        indexgetDataSourceRateFun2(){
            this.loadingVisible2 = true
            try {
                indexgetDataSourceRate({type:'cluster'}).then(res=>{
                    this.droppie(res.data)
                })
            } catch (error) {} finally {
                this.loadingVisible2 = false
            }
        },
        indexgetDataSourceRateFun3(){
            this.loadingVisible1 = true
            try {
                indexgetDataSourceRate({type:'dataModel'}).then(res=>{
                    // this.drop01(res.data)
                    this.tableList = res.data.values
                })
            } catch (error) {} finally {
                this.loadingVisible1 = false
            }
        },
        indexgetServiceInfoFun(){
            this.loadingVisible6 = true
            try {
                indexgetServiceInfo({}).then(res=>{
                    this.roptions1 = res.data
                })
            } catch (error) {} finally {
                this.loadingVisible6 = false
            }
        },
        requestLoggetRequestStatusCountFun(){
            this.loadingVisible3 = true
            try {
                requestLoggetRequestStatusCount({}).then(res=>{
                    this.loadingVisible3 = false
                    console.log(this.loadingVisible3)
                    if(res.data&&Array.isArray(res.data)){
                        this.customColors = res.data

                    }
                })
            } catch (error) {} finally {}
        }
    },
    created(){

    },
    mounted(){
        this.$nextTick(res=>{
            this.indexgetUseageInfoFun()
            this.dataSubjectdirectorygetListFun()
            this.dataModelapplygetListFun()
            this.MQMonitorkafkaFun()
            this.indexgetDataSourceRateFun()
            this.indexgetDataSourceRateFun2()
            this.indexgetDataSourceRateFun3()
            this.indexgetServiceInfoFun()
            this.requestLoggetRequestStatusCountFun()
        })
    }
}

</script>


<style  lang="scss" scoped>
  @import "~@/assets/styles/variables.scss";
  >>>::-webkit-scrollbar{
    display: none;
}
    .rul{
        display: flex;
        flex-direction: row;
        list-style: none;
        li{
            flex: 1;
            text-align: center;
            padding:20px 0 12px 0;
            p{
                line-height: 32px;
            }
            div{
                width: 50px;
                height: 50px;
                border-radius: 100%;
                // border: 2px solid #fe9d4e;
                margin: 0 auto;
                line-height: 50px;
                margin-bottom: 10px;
            }
            .name{
                color: #757575;
                letter-spacing:1px;
                font-size: 10px;
            }
            .count{
                font-size: 22px;
            }
        }
    }
    .lul{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        list-style: none;
        padding-left: 20px;
        li{
            width: 47%;
            border: 1px solid #dfe6ec;
            height:84px;
            margin:10px 10px 0 0;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            box-sizing: border-box;
            .icon{
                border:2px solid #3d8aee;
                border-radius: 100%;
                color:#505050;
                text-align: center;
                width: 50px;
                height: 50px;
                line-height: 50px;
                margin: 15px;
            }
            .info{
                flex: 1;
                padding:12px;
                p{
                    line-height: 20px;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    color: #999;
                    font-size: 10px;
                    label{
                        font-weight: normal;
                    }
                    span{
                        font-size: 14px;
                        background: #f1f3f6;
                        display: inline-block;
                        width:50px;
                        text-align: center;
                        border:1px solid #fff;
                        box-sizing: border-box;
                        font-size: 6px;
                        border-radius: 2px;
                    }
                }
            }
        }
    }
    .lastul{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        list-style: none;
        padding-left: 20px;
        height: 290px;
        overflow: scroll;
        li{
            width: 46%;
            box-sizing: border-box;
            margin: 6px 5px;
            height: 60px;
            line-height: 60px;
            border:1px dashed #929292;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            list-style: none;
            border-radius: 2px;
            span{
                flex:1;
                text-align: center;
            }
            span:nth-child(1){
               display: inline-block;
               width:100px; overflow: hidden; text-overflow:ellipsis; white-space:nowrap;
            }
            span:nth-child(3){
                font-size: 22px;
            }
            // '#fe9d4e','#6b94ff','#63dead','#e57562','#e3cdee','#9a69bc','#647998'
        }
        li:nth-child(even){
            border:1px dashed #fe9d4e;
            background:#fe9d4e25;
            span:nth-child(3){
                color: #fe9d4e;
            }
        }
        li:nth-child(odd){
            border:1px dashed #6b94ff;
            background:#6b95ff2f;
            span:nth-child(3){
                color: #6b94ff;
            }
        }
        // li:nth-child(3){
        //     border:1px dashed #63dead;
        //     background:#63dead1f;
        //     span:nth-child(3){
        //         color: #63dead;
        //     }
        // }
        // li:nth-child(4){
        //     border:1px dashed #e57562;
        //     background:#e5766228;
        //     span:nth-child(3){
        //         color: #e57562;
        //     }
        // }
        // li:nth-child(5){
        //     border:1px dashed #e3cdee;
        //     background:#e3cdee2c;
        //     span:nth-child(3){
        //         color: #e3cdee;
        //     }
        // }
        // li:nth-child(6){
        //     border:1px dashed #647998;
        //     background:#64799828;
        //     span:nth-child(3){
        //         color: #647998;
        //     }
        // }
    }
    .indexBj{
        flex-direction: row;
        height:calc(100vh - 116px);
        padding-top:16px ;
        // background: #f6f8fb;
    }
    .left{
        flex-direction: column;
        border-right: 2px solid #f2f5f8;
        width:64%;
        .leftTop{
            height:36%;
        }
        .bottom{
            display: flex;
            flex-direction: column;
            flex: 1;
            >div:nth-child(1){
                height:220px;
                margin-bottom: 10px;
            }
            >div:nth-child(2){
                // height:180px;
                flex: 1;
                padding-bottom: 20px;
            }
            .content{
                height: 100%;
            }
            .content:nth-child(1){
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                >div:nth-child(1){
                    width: 67%;
                }
                >div:nth-child(2){
                    width: 32%;
                }
            }
        }
    }

    .indexBj,.top,.left{
        h4{
            padding:0 8px;
            margin-left: 10px;
            border-left: 5px solid $themColor;
            margin: 4px 15px;
            font-size: 15px;
        }
        display: flex;
        justify-content: space-between;
        .top{
            height:85%;
            margin-bottom: 10px;
            border-bottom: 2px solid #f2f5f8;
            .content{
                flex: 1;
                height: 100%;
                padding:12px;
            }
        }

        .right{
            width:36%;
            display: flex;
            flex-direction: column;
            >div{
                margin-bottom: 10px;
            }
            .right-top{
                height:25%;
            }
            .right-center{
                height:28%;
            }
            .right-bottom{
                flex: 1;
            }
        }
    }

</style>
